<template>
    <el-drawer v-model="show" :title="title" :size="wd" :with-header="false" padding="0" v-if="dialogType == 'drawer'">
        <slot name="drawerContent"></slot>
    </el-drawer>
    <el-dialog v-model="show" :title="title" :width="widthMinus" v-if="dialogType == 'dialog'">
        <slot name="dialogContent"></slot>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted } from 'vue'
const props = defineProps({
    widthMinus: {
        type: Number, //当前屏幕减去侧边栏的宽度减去传入的宽度
        default: 0
    },
    dialogType: {
        type: String,
        default: "drawer"
    },
    title: {
        type: String,
        default: "" //当前屏幕的弹框类型
    }
})
const show = ref<any>(false);
const dialogType = computed(() => {
    return props.dialogType
})
const showFun = () => {
    show.value = show.value == false
}
const wd = ref(0)
const init = (() => {
    nextTick(() => {
        let bw = document.getElementsByTagName("body")[0].clientWidth
        let aw = document.getElementsByClassName("aside")[0].clientWidth
        wd.value = bw - aw - props.widthMinus
    })
})
onMounted(() => {
    init()
})
defineExpose({   //必须导出
    showFun, 
    show
});
</script>

<style lang='scss' scoped></style>